<template>
	<view class="page">
		<back-top v-if="showTop"></back-top>
		<view class="top-box">
			<view class="search-box flex-box align-center">
				<view class="flex-box align-center flex">
					<text class="iconfont icon-search"></text>
					<input type="text" v-model="keywords" placeholder="输入关键字、姓名、电话查询"
					 @confirm="comfirm" confirm-type="search" @input="noData=false"
					 class="flex" placeholder-class="pla"/>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="(r,i) in list" :key='i' :class="{active: itemCurrent == i}">
				<view class="no flex-box flex-between">
					<view class="code">预约单号：{{ r.sncode_number }}</view>
					<text v-if='r.sncode_flag == 0'>待处理</text>
					<text v-if='r.sncode_flag == 3'>审核中</text>
					<text v-if='r.sncode_flag == 2'>已拒绝</text>
					<text class='st1' v-if='r.sncode_flag == 1'>已完成</text>
				</view>
				<view>{{ r.user_name }}</view>
				<view>{{ r.sncode_user_mobi }}</view>
				<view>{{ r.sncode_addtime }}</view>
				<view class="btns flex-box align-center">
					<!-- <text class="iconfont icon-down" @click="itemCurrent = itemCurrent==i?-1:i"></text> -->
					<view class="flex-box flex">
						<view class="btn" @click="toUrl('/pages/appointment/detail?id='+r.sncode_id)">详情</view>
						<view class="btn">联系客户</view>
						<view class="btn1" @click="WriteOff_(r.sncode_id,i)">核销订单</view>
					</view>
				</view>
			</view>
		</view>
	
		
		<view class="mask flex-box flex-center align-center" v-if='showAdjustment' @click="showAdjustment = false">
			<view class="adjustment" @click.stop>
				<view class="title">核销订单</view>
				<view class="msg">
					<view class="satets flex-between">
						<view @click="exState = exState==1?-1:1" :class="{active:exState==1}">确认</view>
						<view @click="exState = exState==3?-1:3" :class="{active:exState==3}">审核中</view>
						<view @click="exState = exState==2?-1:2" :class="{active:exState==2}">拒绝</view>
					</view>
					<view class="item flex-box align-center">
						<input type="text" v-model="reason" placeholder="请输入原因" placeholder-class="pla"/>
					</view>
				</view>
				<view class="btns flex-box">
					<view class="cancel" @click="showAdjustment = false">取消</view>
					<view class="ok" @click="WriteOff()">确定</view>
				</view>
			</view>
		</view>
		<view class="DiLine" v-if='showDiLine'>------- 我也是有底线的 -------</view>
		<empty type='1' v-if='noData && keywords' :msg="'没有找到关于“'+keywords+'”商品哦 ~<br>换个关键词试试吧'"></empty>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				showTop: false,
				current:0,
				tabs:[
					{name:'待处理',state:0},
					{name:'审核中',state:3},
					{name:'已拒绝',state:2},
					{name:'已完成',state:1}
				],
				itemCurrent: -1,
				showAdjustment: false,
				exState: 1,
				reason:'',
				state: 0,
				limit: 10,
				page: 1,
				list:[],
				noData: false,
				more:false,
				showDiLine: false,
				keywords:'',
				sncode_id:''
			};
		},
		onLoad(e) {
			that = this;
			if(e.key){
				that.keywords = e.key
				that.getList()
			}
			// #ifdef H5
			this.$common.H5HideShare()
			// #endif
		},
		onPageScroll(e) {
			if(e.scrollTop > 520){
				that.showTop = true
			}else{
				that.showTop = false
			}
		},
		onReachBottom() {
			if(that.more){
				that.getList()
			}
		},
		methods:{
			comfirm(){
				if(that.keywords.trim()){
					that.page = 1
					that.list = []
					that.getList()
				}else{
					uni.showToast({
						title:'请先输入搜索关键词',icon:'none'
					})
				}
			},
			backOff(order_id,index){
				uni.showModal({
				    title: '是否已收到退货商品？',
				    content: '确定退单后，退款金额将原路退返客户',
					confirmText:'确定退单',
					cancelColor:"#999999",
					confirmColor: "#FF784A",
				    success: function (res) {
				        if (res.confirm) {
				            that.$http.post({
				            	url: '/singleSaleManageApi/singleSaleRefuse',
				            	data:{
				            		shop_id: uni.getStorageSync('store_id'),
				            		order_id: order_id
				            	}
				            }).then(res => {
				            	if (res.code == 200) {
				            		that.list.splice(index,1)
									if(that.list.length < 1 || !that.list){
										that.noData = true
									}
				            	}else{
									uni.showToast({
										title: res.msg,
										icon:'none'
									})
								}
				            })
				        }
				    }
				});
			},
			Stockup(order_id,index){
				uni.showModal({
				    title: '是否确定已备货完成？',
				    content: '备货完成后用户将随时抵达提货',
					confirmText:'备货完成',
					cancelColor:"#999999",
					confirmColor: "#FF784A",
				    success: function (res) {
				        if (res.confirm) {
				            that.$http.post({
				            	url: '/singleSaleManageApi/prepareGoods',
				            	data:{
				            		shop_id: uni.getStorageSync('store_id'),
				            		order_id: order_id
				            	}
				            }).then(res => {
				            	if (res.code == 200) {
				            		that.list.splice(index,1)
									if(that.list.length < 1 || !that.list){
										that.noData = true
									}
				            	}else{
									uni.showToast({
										title: res.msg,
										icon:'none'
									})
								}
				            })
				        }
				    }
				});
			},
			change(i,state){
				that.current = i
				that.state = state
				that.page = 1
				that.list = []
				that.getList()
			},
			getList(){
				that.noData = false
				that.more = false
				that.showDiLine = false
				that.$http.get({
					url: '/singleSaleManageApi/sncodeList',
					data:{
						shop_id: uni.getStorageSync('store_id'),
						// sncode_flag: that.state, // 状态 0待审核 1已完成 2审核未通过
						keywords:that.keywords,
						page: that.page,
						limit: that.limit
					}
				}).then(res => {
					if(res.data){
						that.list = that.list.concat(res.data)
						if(res.data.length >= that.limit){
							that.more = true
							that.page ++
						}
					}
					if(that.list.length >= that.limit && !that.more){
						that.showDiLine = true
					}
					if(!that.list || that.list.length < 1){
						that.noData = true
					}
				})
			},
			WriteOff_(sncode_id,i){
				that.sncode_id = sncode_id
				that.index = i
				that.showAdjustment = true
			},
			WriteOff(){
				if(that.exState == -1){
					uni.showToast({
						title:'请先选择核销状态',
						icon: 'none'
					})
					return
				}
				that.$http.post({
					url: '/singleSaleManageApi/checkSncode',
					data:{
						shop_id: uni.getStorageSync('store_id'),
						sncode_id: that.sncode_id,
						sncode_content: that.reason, //管理员回复
						sncode_flag: that.exState // 0未使用 1已操作 2停用 3审核中
					}
				}).then(res => {
					if(res.code == 200){
						that.showAdjustment = false
						that.list.splice(that.index,1)
						if(!that.list || that.list.length < 1){
							that.noData = true
						}
					}
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
.page{
	padding-top: 88rpx;
	view{
		font-size: 28rpx;
	}
	.top-box{
		position: fixed;
		top: 0;
		width: 100%;
		height: 88rpx;
		z-index: 3;
		background-color: #FFFFFF;
		.search-box{
			height: 88rpx;
			padding: 0 30rpx;
			>view{
				background-color: #F5F5F5;
				height: 56rpx;
				border-radius: 28rpx;
				padding: 0 28rpx;
				.icon-search{
					color: #999999;
					font-size: 32rpx;
				}
				.pla {
					font-size: 26rpx;
				}
				input{
					font-size: 26rpx;
					padding: 0 10rpx;
				}
			}
		}
	
		
	}
	.list{
		padding: $page-space;
		.item{
			background-color: #FFFFFF;
			padding: 24rpx $page-space 0;
			border-radius: $border-radius-sm;
			margin-bottom: $page-space;
			position: relative;
			&::before{
				content: '';
				position: absolute;
				width: 4rpx;
				height: 24rpx;
				background-color: $uni-color-primary;
				left: 0;
				top: 32rpx;
				border-radius: 0 4rpx 4rpx 0;
			}
			text{
				font-size: 28rpx;
				color: #FF6C6C;
			}
			.st1{
				color: #999999;
			}
			.no{
				view{
					font-weight: 600;
				}
			}
			>view{
				margin-bottom: 15rpx;
			}
			.log{
				background-color: #90CFFF;
				color: white;
				font-size: 24rpx;
				padding: 2rpx 6rpx;
				border-radius: 4rpx;
			}
			.tag{
				background-color: #F6B081;
				color: white;
				font-size: 24rpx;
				padding: 2rpx 6rpx;
				border-radius: 4rpx;
				margin-right: 20rpx;
			}
			.remarks{
				color: #999999;
				margin-bottom: 20rpx;
				height: 0;
				overflow: hidden;
				transition: all .3s;
			}
			&.active{
				.remarks{
					height: auto;
				}
				.icon-down{
					transform: rotate(180deg);
				}
			}
			.btns{
				margin-left: -$page-space;
				margin-right: -$page-space;
				height: 104rpx;
				border-top: 1px solid #F5F5F5;
				padding: 0 $page-space 0 0;
				.icon-down{
					color: #999999;
					font-size: 26rpx;
					padding: 20rpx $page-space;
					transition: all .2s;
				}
				>view{
					justify-content: flex-end;
					flex-wrap: wrap;
					.btn{
						margin-left: 20rpx;
						line-height: 56rpx;
						color: #999999;
						border: 1px solid #afafaf;
						border-radius: 56rpx;
						padding: 0 24rpx;
					}
					.btn1{
						margin-left: 20rpx;
						line-height: 56rpx;
						color: #FFFFFF;
						border: 1px solid $uni-color-primary;
						background-color: $uni-color-primary;
						border-radius: 56rpx;
						padding: 0 24rpx;
					}
				}
			}
		}
	}

	.adjustment{
		background-color: #FFFFFF;
		width: 590rpx;
		border-radius: $border-radius-base;
		overflow: hidden;
		.title{
			text-align: center;
			padding: 48rpx 0;
			font-size: 36rpx;
			font-weight: 600;
		}
		.msg{
			padding: 0 30rpx;
			.item{
				margin-top: 28rpx;
				height: 88rpx;
				border-radius: 44rpx;
				border: 1px solid #EEEEEE;
				padding: 0 30rpx;
				input{
					height: 100%;
					font-size: 28rpx;
				}
			}
			.satets{
				view{
					line-height: 56rpx;
					border: 1px solid #EEEEEE;
					padding: 0 30rpx;
					border-radius: 56rpx;
					&.active{
						background-color: $uni-color-primary;
						border: 1px solid $uni-color-primary;
						color: $fff;
					}
				}
			}
		}
		.btns{
			height: 88rpx;
			line-height: 88rpx;
			margin-top: 50rpx;
			.cancel{
				color: #4C4C4C;
				font-size: 32rpx;
				flex: 1;
				text-align: center;
				border-top: 1px solid #EEEEEE;
			}
			.ok{
				flex: 1;
				text-align: center;
				color: #FFFFFF;
				background-color: $uni-color-primary;
				font-size: 32rpx;
			}
		}
	}
}
</style>
